<template>
  <detail-frame :title="title">
    <el-form inline :label-width="120" label-suffix=":">
      <el-form-item class="form-item" label="创建人">
        {{ detail?.shipping.cuser }}
      </el-form-item>
      <el-form-item class="form-item" label="创建时间">
        {{ detail?.shipping.ctime }}
      </el-form-item>
      <el-form-item class="form-item" label="订单编号">
        {{ detail?.shipping.orderNumber }}
      </el-form-item>
      <el-form-item class="form-item" label="PO订单号">
        {{ detail?.shipping.poNumber }}
      </el-form-item>
      <el-form-item class="form-item" label="采购主体">
        {{ detail?.shipping.purchaseCompany }}
      </el-form-item>
      <el-form-item class="form-item" label="联系人">
        {{ detail?.shipping.contactor }}
      </el-form-item>
      <el-form-item class="form-item" label="联系电话">
        {{ detail?.shipping.telephone }}
      </el-form-item>
      <el-form-item class="form-item-line" label="联系地址">
        {{ detail?.shipping.address }}
      </el-form-item>
      <el-form-item class="form-item" label="物流公司">
        {{ detail?.shipping.logisticsCompany }}
      </el-form-item>
      <el-form-item class="form-item" label="物流单号">
        {{ detail?.shipping.logisticsNumber }}
      </el-form-item>
      <el-form-item class="form-item" label="出货日期">
        {{ detail?.shipping.shippingDate.replace("00:00:00", "") }}
      </el-form-item>
    </el-form>
    <detail-list-frame title="物料" inner-control :columns="columns" :table-data="tableData"
      :total="tableData.length"></detail-list-frame>
    <template #buttons>
      <el-button v-auth="'UpdateShippingDetail'" type="primary" @click="onUpdate">编辑</el-button>
      <el-button v-auth="'DeleteShippingDetail'" type="danger" @click="onDelete">删除</el-button>
    </template>
  </detail-frame>
</template>
<script lang="ts" setup>
import DetailFrame from '@/components/DetailFrame/DetailFrame.vue';
import DetailListFrame from '@/components/DetailFrame/DetailListFrame.vue';
import ElConfirm from '@/components/ElConfirm';
import type { ColumnType } from '@/components/types';
import WinUtil, { WinNameRecord } from '@/plugins/window';
import ApiTree from '@/server/api-tree';
import type { ShippingDetailDTO, ShippingMaterialDTO } from '@/server/shipping/types';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()
const title = ref<string>("")
const guid = ref<string>(route.query.guid?.toString() || "");
/** 明细 */
const detail = ref<ShippingDetailDTO>();
const getDetail = async () => {
  const { success, data } = await ApiTree.shipping.getDetail(guid.value);
  if (success) {
    title.value = `发货订单明细【${data.shipping.orderNumber}】`
    detail.value = data;
    tableData.value = data.shippingMaterials.map((x, i) => {
      return {
        ...x,
        id: i + 1
      }
    });
  }
}
/** 物料 */
const columns = [
  { prop: "id", colName: "序号", width: 0 },
  { prop: "material", colName: "物料名称", width: 0 },
  { prop: "count", colName: "数量", width: 0 },
  { prop: "sn", colName: "SN", width: 0 },
] as ColumnType[];
const tableData = ref<(ShippingMaterialDTO & { id: number })[]>([])
/** 编辑 */
const onUpdate = () => {
  WinUtil.open("/shipping/update?guid=" + guid.value, WinNameRecord.SHIPPING_UPDATE, guid.value);
}
/** 删除 */
const onDelete = () => {
  ElConfirm(`确定要删除订单吗？`).then(async () => {
    const { success, msg } = await ApiTree.shipping.delete(guid.value);
    if (success) {
      ElMessage.success(msg);
      setTimeout(() => {
        window.close();
      }, 200);
    }
  }).catch();
}
onMounted(() => {
  if (!guid.value) {
    ElMessage.error("缺少参数！");
    return;
  }
  getDetail();
})
</script>
<style lang="scss" scope></style>
